<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
		<title>How Much? US aid to Foreign Countries (1960-2010)</title>
		<meta http-equiv="content-type" content="text/html;charset=UTF-8" />

		<script type="text/javascript" src="d3.js"></script>
		<script type="text/javascript" src="d3.geo.js"></script>

		<link href="tutorialstyles.css" rel="stylesheet" type="text/css"/>
		<link href="reset.css" rel="stylesheet" type="text/css"/>
		<link href="jquery-ui.css" rel="stylesheet" type="text/css"/>
		<script src="jquery.min.js"></script>
		<script src="jquery-ui.min.js"></script>

		<link href="style.css" rel="stylesheet" type="text/css"/>
		<script type="text/javascript" src="jquery.tipsy.js"></script>
		<link href="tipsy.css" rel="stylesheet" type="text/css" />
		
		
	</head>
	<body>
	
	<div id="contactFormContainer">


	 <div id="contactForm">
    	<div style="padding: 10px;">
	 	<p>This visualization shows the following: the total amount of aid given by the United States to foreign countries from 1960-2010, the countries who received the aid, and news stories to help/possibly explain "why" the aid was given. Our aid data came from <a href="http://gbk.eads.usaidallnet.gov/data/detailed.html" target="_blank" style="color:green">here</a>, and our news data is from the <a href="http://news.google.com/archivesearch" style="color:green" target="_blank">Google News Archive</a>. The  amount of money has been adjusted for inflation. <a href="credits.htm" target="_blank" style="color:green" >Read more </a></p></div>

       
       </div><!--contactForm-->
       <div class="contact"></div> 
        
     </div><!--contactFormContainer-->


	<div id="backgroundPopup"></div>
    <div id="title"><b>How Much?</b></br> <p style="font-size:26px; color: #292828">U.S. Aid to Foreign Countries (1960-2010)</p></div>
    <div id="eventsHeading">Events of that year</div>

    <div id="slider"></div><script src="yearbar.js"></script>
    <div id="legend">
        <div id="decades">
			<div style="left:0px; position: absolute;">1960</div>
			<div style="left:165px; position: absolute;">1970</div>
			<div style="left:325px; position: absolute;">1980</div>
			<div style="left:490px; position: absolute;">1990</div>
			<div style="left:650px; position: absolute;">2000</div>
			<div style="left:820px; position: absolute;">2010</div>
		
		</div>
	</div>


    <div id="sliderbars"></div>
    <div id="left_corner"><img src="images/left_corner.png"></div>
    <div id="right_corner"><img src="images/right_corner.png"></div>
    <div id="play_control">
        <!--<img id="first" src="images/first.png" alt="Play">-->
        <img id="prev" src="images/prev.png" alt="Play">
        <img id="play" src="images/play.png" alt="Play">
        <img id="next" src="images/next.png" alt="Play">
        <!--<img id="last" src="images/last.png" alt="Play">-->
    </div>
    <div id="ylabel">1960</div>


    <script  src="code.js"> </script>

	<div id="chart"></div>
	
		<div id="zoom_control">
			<img id="zoom-in" src="images/zoom-in.png" alt="Zoom in">
			<img id="zoom-reset" src="images/zoom-reset.png" alt="Reset">
			<img id="zoom-out" src="images/zoom-out.png" alt="Zoom out">
		</div>

	<div id ="totalbyyear">$15,935,661,747</div>
	<div id ="events" style="z-index: 7;"></div>
     
		
	</body>
	
</html>

